import * as Vue from '../node_modules/vue/dist/vue.min'
import {
  nanoid
} from 'nanoid'
import Mock from 'mockjs'
import cheerio from 'cheerio'
import Table from './modules/Table'
import {
  log,
  Clog,
  Jlog
} from './libs/tools'
import '../node_modules/animate.css/animate.min.css'
import './css/index.less'

class App {
  constructor() {
    this.init()
  }

  init() {
    new Vue({
      el: '#app',
      data() {
        return {
          table: null,
          column: null,
          currentAnimate: '',
          animateList: ['animate__bounceInUp', 'animate__fadeInRight', 'animate__fadeOut'],
          dataType: [{
              id: nanoid(),
              label: '姓名(中文)',
              type: '@cname()',
              list: [],
            },
            {
              id: nanoid(),
              label: '姓名(英文)',
              type: '@name()',
              list: [],
            },
            {
              id: nanoid(),
              label: '性别',
              type: /(男)|(女)/,
              list: [],
            },
            {
              id: nanoid(),
              label: '身份证',
              type: /(1[1-5]|2[1-3]|3[1-7]|4[1-6]|5[0-4]|6[1-5]|71|8[1-2])\d{4}(19[0-9]{2}|20([0-1]\d|2[0-1]))(0[1-9]|1[0-2])((0[1-9])|((1|2)[0-8]))\d{3}([0-9]|X)/,
              list: [],
            },
            {
              id: nanoid(),
              label: '手机号',
              type: /(13[0-9]|14(5|7)|15[0-35-9]|18[0-35-9])\d{8}/,
              list: [],
            },
            {
              id: nanoid(),
              label: '邮箱',
              type: /([a-zA-Z0-9]{5,10})@chinatelecom\.cn/,
              list: [],
            },
            {
              id: nanoid(),
              label: '时间(时:分)',
              type: '@time("HH:mm")',
              list: [],
            },
            {
              id: nanoid(),
              label: '日期(年)',
              type: '@datetime("yyyy")',
              list: [],
            },
            {
              id: nanoid(),
              label: '日期(年-月)',
              type: '@datetime("yyyy-MM")',
              list: [],
            },
            {
              id: nanoid(),
              label: '日期(年-月-日)',
              type: '@datetime("yyyy-MM-dd")',
              list: [],
            },
            {
              id: nanoid(),
              label: '日期-时间',
              type: '@datetime("yyyy-MM-dd HH:mm")',
              list: [],
            },
            {
              id: nanoid(),
              label: '整数(自增)',
              type: '@increment()',
              list: [],
            },
            {
              id: nanoid(),
              label: '整数(随机)',
              type: /[1-9]\d{0,5}/,
              list: [],
            },
            // {
            //   id: nanoid(),
            //   label: '自定义集合',
            //   type: 0,
            //   list: ['', '', '']
            // },
          ],
          tHeaderList: [{
              id: nanoid(),
              title: '姓名',
              type: '',
              typeList: [],
              customList: ['']
            },
            {
              id: nanoid(),
              title: '性别',
              type: '',
              typeList: [],
              customList: ['']
            },
            {
              id: nanoid(),
              title: '年龄',
              type: '',
              typeList: [],
              customList: ['']
            },
          ],
          exportNum: 10,
          exportCanSelectNumList: [10, 30, 50, 100, 200, 400, 800]
        }
      },
      mounted() {
        this.table = new Table();
        this.tHeaderList = this.tHeaderList.map(item => ({
          ...item,
          typeList: this.dataType
        }))
      },
      methods: {
        // 获取最新的表头顺序
        getLatestHeaderList() {
          return Array.from(document.querySelectorAll('#app .table li')).map(el => {
            let res = {
              title: el.children[1].value,
              type: el.children[2].value,
            }
            if (el.children[3]) {
              res.list = Array.from(el.children[3].children).map(el => el.children[0].value)
            }
            return res
          })
        },

        // 根据类型ID获取类型
        getTypeById(id) {
          let target = this.dataType.find(item => item.id === id)
          return target ? target.type : ''
        },

        // 添加新列
        addNewHeader() {
          this.tHeaderList = [...this.tHeaderList, {
            id: nanoid(),
            title: 'header',
            type: '',
            typeList: this.dataType
          }]
        },

        // 移除列 
        removeHeader(id) {
          let targetIndex = this.tHeaderList.findIndex(item => item.id === id)
          this.tHeaderList.splice(targetIndex, 1)
        },

        // 导出excel
        export2Excel() {
          let source = {}
          for (let item of this.getLatestHeaderList()) {
            let type = this.getTypeById(item.type)
            if (typeof type === "string" && type.indexOf('@') === 0 || type === '') {
              source[item.title] = type;
            } else {
              source[item.title] = new RegExp(type);
            }
          }

          let mockData = Mock.mock({
            [`data|${this.exportNum}`]: [{
              ...source
            }]
          }).data

          let tHeader = this.getLatestHeaderList().map(item => item.title)
          let data = mockData.map(v => tHeader.map(key => v[key]))

          import('./libs/Export2Excel').then(excel => {
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: new Date().getTime() + ''
            })
          })
        }
      },
    })
  }
}

// let table = new Table()
// let dt = new DragTable()
let app = new App()
// let table = new Table()
